<style scoped>
.all {
  width: 100%;
  height: 1100px;
  background: url("http://v.bootstrapmb.com/2020/9/wu7m08812/images/interact.png")
    no-repeat;
  background-size: 100% 100%;
}
.img {
  width: 100%;
  height: 280px;
}
.text_content {
  border: 2px solid lightgray;
  padding: 5px;
  font-size: 18px;
  width: 100%;
  overflow: hidden;
}
.header {
  font-weight: 800;
  font-size: 50px;
  line-height: 85px;
  font-family: "微软雅黑";
  color: #fff;
  border-radius: 35px;
  width: 100%;
  height: 85px;
  text-align: center;
  /* border: 1px solid red; */
}
.main_left {
  float: left;
  width: 20%;
  height: 100%;
  /* border: 1px solid red; */
}

.main_center {
  float: left;
  width: 60%;
  height: 100%;
  border-left: 1px solid rgba(200, 200, 200, 0.377);
  border-right: 1px solid rgba(200, 200, 200, 0.377);
}
.main_right {
  float: right;
  width: 20%;
  height: 100%;
  /* border: 1px solid red; */
}
.left_top {
  color: #fff;
  width: 100%;
  height: 300px;
  /* border: 1px solid green; */
}
.left_footer {
  width: 100%;
  height: 700px;
}
.main_top {
  width: 100%;
  height: 660px;
  /* background-color: #FFF; */
}
.main_footer {
  width: 100%;
  height: 200px;
  /* background-color: royalblue; */
  overflow: hidden;
}
#echarts2 {
  box-shadow: 0px 0px 20px orange;
  animation: change 3s infinite linear alternate;
}
.right_top {
  width: 100%;
  height: 280px;
}
.right_center {
  width: 100%;
  height: 330px;
}
.right_footer {
  width: 100%;
  height: 390px;
}
.title_new {
  float: left;
  background-color: #f43b3b;
  width: 40px;
  height: 20px;
  line-height: 20px;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  margin-top: 10px;
  margin-left: 10px;
}
.title_time {
  float: left;
  height: 20px;
  line-height: 20px;
  color: #fff;
  padding-left: 10px;
  padding-top: 10px;
}
.article_title {
  width: 100%;
  height: 40px;
  float: left;
}
.el-carousel__item h3 {
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
@keyframes change {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}
#新闻播报 {
  width: 1083.4px;
  height: 30px;
  overflow: hidden;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
.news {
  width: 1000px;
  text-align: left;
  height: 30px;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  float: left !important;
}
.news:hover {
  cursor: pointer;
  color: red;
}
#newsMove {
  animation: news_move 40s infinite linear;
}

#newsMove:hover {
  animation-play-state: paused;
}

@keyframes news_move {
  from {
    margin-left: 0px;
  }

  to {
    margin-left: -4000px;
  }
}
</style>
<template>
  <div class="all">
    <div class="header">全局疫情可视化</div>
    <div class="main">
      <div class="main_left">
        <div class="left_top" style="color: #fff; border: 1px solid #666">
          <div
            id="content"
            style="height: 80%"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          ></div>
          <p style="text-align: center">各省份疫情人数</p>
        </div>
        <div class="left_footer" style="border: 1px solid #666">
          <div
            style="
              width: 100%;
              height: 40px;
              text-align: center;
              background-color: #666;
            "
          >
            <p
              style="
                color: #fff;
                height: 40px;
                line-height: 40px;
                margin-top: 0;
              "
            >
              最新消息
            </p>
          </div>
          <div style="height: 700px">
            <div
              v-for="(item, index) in article.list"
              :key="item.id"
              style="margin-top: 3px; height: 120px"
            >
              <div class="article_title">
                <div class="logo"></div>
                <div v-if="index == 0" class="title_new">最新</div>
                <div class="title_time">{{ item.publishTime | dateFMT }}</div>
              </div>
              <div
                style="
                  background-color: rgba(34, 31, 233, 0.1);
                  border-radius: 8px;
                  padding: 10px;
                  color: #fff;
                  line-height: 30px;
                  font-size: 14px;
                  width: 100%;
                "
                @click="detail(item.id)"
              >
                {{ item.title }}
              </div>
            </div>
            <el-dialog
              title="文章详情内容"
              :visible.sync="dialogVisible"
              width="60%"
            >
              <h2 style="text-align: center">{{ article_detail.title }}</h2>
              <div v-html="article_detail.content" class="text_content"></div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
            <div style="text-align: center">
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="obj2.pageSize"
                :current-page="obj2.page"
                @current-change="change2"
                :total="article.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="main_center">
        <div class="main_top">
          <!-- {{tag}} -->
          <div style="width: 100%; height: 60px">
            <el-button
              @click="nowTag"
              style="width: 100px; height: 40px; background: none; color: #fff"
              >现有确诊</el-button
            >
            <el-button
              @click="allTag"
              style="width: 100px; height: 40px; background: none; color: #fff"
              >累计确诊</el-button
            >
          </div>
          <Map :tag_1="tag"></Map>
        </div>
        <div class="main_center" style="width: 1083.4px; height: 140px">
          <div style="width: 1083.4ox; height: 30px; margin-top: 40px">
            <div
              style="
                width: 200px;
                height: 30px;
                color: #fff;
                float: left;
                line-height: 30px;
                font-size: 20px;
                font-weight: 600;
              "
            >
              新鲜事，简单报<i
                class="iconfont icon-laba-copy"
                style="font-size: 18px; font-weight: 400"
              ></i
              >：
            </div>
          </div>
          <div id="新闻播报">
            <div style="width: 5250px; height: 33.4px" id="newsMove">
              <div class="news">石家庄完成核酸采样610余万人 新增阳性11例</div>
              <div class="news">
                冲锋在抗疫一线的“科研铁军”——军事科学院军事医学专家组抗击新冠肺炎疫情记事
              </div>
              <div class="news">
                全球疫情简报：世卫专家称变异新冠病毒将成2021年新挑战
              </div>
              <div class="news">新冠肺炎疫情：美国年轻人遭遇的“一场灾难”</div>
              <div class="news">石家庄完成核酸采样610余万人 新增阳性11例</div>
            </div>
          </div>
          <div id='nowtime' style="color:#fff;width:100%;height:33.4px;line-height:33.4px;text-align:center;">当前时间：{{madetime}}
            
          </div>
        </div>
        <div class="main_footer">
          <div
            style="width: 33%; height: 200px; float: left; margin: 0"
            id="echarts1"
          ></div>
          <div
            style="
              width: 34%;
              height: 200px;
              color: #fff;
              float: left;
              border: 2px solid #fff;
              border-radius: 20px;
            "
            id="echarts2"
          >
            <div
              style="
                width: 50%;
                height: 50%;
                float: left;
                border-right: 1px solid #fff;
                border-bottom: 1px solid #fff;
              "
            >
              <p style="width: 100%; font-size: 16px; text-align: center">
                累计确诊
              </p>
              <p
                style="
                  width: 100%;
                  font-size: 16px;
                  text-align: center;
                  color: #e83132;
                  font-size: 30px;
                  font-weight: 800;
                  margin-top: 0;
                "
              >
                {{ this.gntotal }}
              </p>
            </div>
            <div
              style="
                width: 50%;
                height: 50%;
                float: left;
                border-left: 1px solid #fff;
                border-bottom: 1px solid #fff;
              "
            >
              <p style="width: 100%; font-size: 16px; text-align: center">
                累计治愈
              </p>
              <p
                style="
                  width: 100%;
                  font-size: 16px;
                  text-align: center;
                  color: #10aeb5;
                  font-size: 30px;
                  font-weight: 800;
                  margin-top: 0;
                "
              >
                {{ this.curetotal }}
              </p>
            </div>
            <div
              style="
                width: 50%;
                height: 50%;
                float: left;
                border-right: 1px solid #fff;
                border-top: 1px solid #fff;
              "
            >
              <p style="width: 100%; font-size: 16px; text-align: center">
                累计死亡
              </p>
              <p
                style="
                  width: 100%;
                  font-size: 16px;
                  text-align: center;
                  color: gray;
                  font-size: 30px;
                  font-weight: 800;
                  margin-top: 0;
                "
              >
                {{ this.deathtotal }}
              </p>
            </div>
            <div
              style="
                width: 50%;
                height: 50%;
                float: left;
                border-left: 1px solid #fff;
                border-top: 1px solid #fff;
              "
            >
              <p style="width: 100%; font-size: 16px; text-align: center">
                境外输入
              </p>
              <p
                style="
                  width: 100%;
                  font-size: 16px;
                  text-align: center;
                  color: rgb(242, 246, 1);
                  font-size: 30px;
                  font-weight: 800;
                  margin-top: 0;
                "
              >
                {{ this.jwsrNum }}
              </p>
            </div>
          </div>
          <div
            style="width: 33%; height: 200px; float: left"
            id="echarts3"
          ></div>
        </div>
      </div>

      <div class="main_right">
        <div class="right_top" style="color: #fff">
          <el-carousel height="280px" width="500px">
            <el-carousel-item>
              <img
                src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2287996254,343105202&fm=26&gp=0.jpg"
                class="img"
              />
            </el-carousel-item>
            <el-carousel-item>
              <img
                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3279728203,2651999432&fm=26&gp=0.jpg"
                class="img"
              />
            </el-carousel-item>
            <el-carousel-item>
              <img
                src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1600572062,3543703781&fm=26&gp=0.jpg"
                class="img"
              />
            </el-carousel-item>
            <el-carousel-item>
              <img
                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2993960696,2664686725&fm=26&gp=0.jpg"
                class="img"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right_center">
          <div
            style="
              width: 406px;
              text-align: center;
              position: absolute;
              margin-top: 20px;
              color: #fff;
              font-size: 20px;
              font-weight: 800;
            "
          >
            全球累计确诊人数统计占比
          </div>
          <div id="echarts4" style="width: 100%; height: 100%"></div>
        </div>
        <div
          class="right_footer"
          id="echarts5"
          style="color: #fff; width: 100%; height: 390px"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from "vuex";
import moment from "moment";
import Map from "../../components/Map";
import axios from "@/http/axios";
export default {
  // 将分页查询的数据前十项显示到折线图中
  // x轴显示省份，y轴显示确诊人数
  mounted() {
    this.initEcharts();
    this.initEcharts1();
    this.initEcharts3();
    this.initEcharts4();
    this.initEcharts5();
  },
  computed: {
    ...mapState("dataList", ["dataList"]),
  },
  components: {
    Map,
  },
  watch: {
    obj2: {
      handler: function () {
        this.page_query_article(this.obj2);
      },
      deep: true,
    },
  },
  data() {
    return {
      article_detail: {},
      dialogVisible: false,
      loading: true,
      id: 0,
      tag: 0,
      obj2: {
        page: 1,
        pageSize: 5,
      },
      gntotal: 0,
      curetotal: 0,
      deathtotal: 0,
      jwsrNum: 0,
      madetime:0,
    };
  },
  //组件销毁
  destroyed() {
    clearInterval(this.id);
  },
  computed: {
    ...mapState("dataList", ["dataList"]),
    ...mapState("article", ["article"]),
    ...mapGetters("dataList", [
      "confirmed",
      "suspected",
      "dead",
      "cure",
      "severe",
      "outside",
    ]),
  },
  created() {
    this.gettime(); //显示第一秒的时间
    this.findJson();
    this.page_query_article(this.obj2);
    this.id = setInterval(() => {
      this.findData();
    }, 3000);    
    setInterval(() => {
      this.gettime();
    }, 1000);
  },
  methods: {
    ...mapActions("dataList", ["page_query"]),
    ...mapActions("article", ["page_query_article", "FindById"]),
    findJson() {
      axios
        .get("http://localhost:9528/test/news/wap/fymap2020_data.d.json")
        .then((res) => {
          console.log(res.data);
          this.gntotal = res.data.gntotal;
          this.curetotal = res.data.curetotal;
          this.deathtotal = res.data.deathtotal;
          this.jwsrNum = res.data.jwsrNum;
        });
    },
    initEcharts(res1, res2) {
      // 销毁图标
      echarts.init(document.getElementById("content")).dispose();
      // 初始化图表
      var myChart = echarts.init(document.getElementById("content"));

      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: "category",
          data: res1,
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
            formatter(val) {
              return val.split("").join("\n");
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            data: res2,
            type: "line",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initEcharts1() {
      echarts.init(document.getElementById("echarts1")).dispose();
      // 初始化图表
      var myChart = echarts.init(document.getElementById("echarts1"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          left: "center",
          textStyle: {
            color: "#fff",
          },

          text: "国内单日境外输入病历人数排行",
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },

            type: "value",
          },
        ],
        yAxis: [
          {
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            type: "category",
            axisTick: {
              show: false,
            },
            data: ["广东", "黑龙江", "上海", "四川", "陕西", "内蒙古", "福建"],
          },
        ],
        series: [
          {
            itemStyle: {
              normal: {
                //这里是重点
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            name: "人数",
            type: "bar",
            label: {
              show: true,
              position: "inside",
              color: "#fff",
            },
            data: [-666, -389, -1194, -303, -276, -261, -222],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initEcharts3() {
      echarts.init(document.getElementById("echarts3")).dispose();
      // 初始化图表
      var myChart = echarts.init(document.getElementById("echarts3"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          left: "center",
          textStyle: {
            color: "#fff",
          },

          text: "全球国家单日新增排行",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "5%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            type: "value",
          },
        ],
        yAxis: [
          {
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            type: "category",
            axisTick: {
              show: false,
            },
            data: ["美国", "英国", "巴西", "德国", "俄罗斯", "西班牙", "法国"],
          },
        ],
        series: [
          {
            itemStyle: {
              normal: {
                //这里是重点
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            name: "利润",
            type: "bar",
            label: {
              show: true,
              position: "right",
              color: "#fff",
            },
            data: [245237, 123238, 57447, 26880, 24217, 23700, 20489],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initEcharts4() {
      echarts.init(document.getElementById("echarts4")).dispose();
      // 初始化图表
      var myChart = echarts.init(document.getElementById("echarts4"));

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "item",

          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "累计确诊人数",
            type: "pie",
            radius: "55%",
            itemStyle: {
              normal: {
                label: {
                  textStyle: {
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: "bolder",
                  },
                },
                labelLine: {
                  lineStyle: {
                    color: "fff",
                  },
                },
              },
            },
            data: [
              { value: 21588382, name: "美国" },
              { value: 10377329, name: "印度" },
              { value: 7812007, name: "巴西" },
              { value: 3308601, name: "俄罗斯" },
              { value: 2774479, name: "英国" },
              { value: 2680239, name: "法国" },
              { value: 2270101, name: "土耳其" },
              { value: 2181619, name: "意大利" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initEcharts5() {
      echarts.init(document.getElementById("echarts5")).dispose();
      // 初始化图表
      var myChart = echarts.init(document.getElementById("echarts5"));

      // 指定图表的配置项和数据
      var option = {
        color: ["red", "gray", "lightgreen"],
        title: {
          left: "center",
          textStyle: {
            color: "#fff",
          },

          text: "全球累计确诊人数/治愈/死亡Top5",
        },
        angleAxis: {
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        radiusAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          data: ["英国", "俄罗斯", "巴西", "印度", "美国"],
          z: 10,
        },
        polar: {},
        series: [
          {
            type: "bar",
            data: [2836801, 3308601, 7874539, 10395938, 21857616],
            coordinateSystem: "polar",
            name: "累计确诊",
            stack: "a",
          },
          {
            type: "bar",
            data: [77346, 59951, 199043, 150372, 369990],
            coordinateSystem: "polar",
            name: "累计死亡",
            stack: "a",
          },
          {
            type: "bar",
            data: [1345824, 2685723, 7036530, 10016859, 13024142],
            coordinateSystem: "polar",
            name: "累计治愈",
            stack: "a",
          },
        ],
        legend: {
          textStyle: {
            color: "#fff",
          },
          bottom: 0,
          show: true,
          data: ["累计确诊", "累计死亡", "累计治愈"],
        },
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    findData() {
      this.page_query({ page: 1, pageSize: 10 }).then(() => {
        let res1 = this.dataList.list.map((item) => {
          return item.province;
        });
        let res2 = this.dataList.list.map((item) => {
          return item.dead;
        });
        this.initEcharts(res1, res2);
      });
    },
    nowTag() {
      this.tag = 0;
    },
    allTag() {
      this.tag = 1;
    },
    change2(val) {
      // console.log(val);
      this.obj2.page = val;
    },
    gettime() {
      var time = new Date();
      var arr = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var hour = time.getHours();
      var min = time.getMinutes();
      var sec = time.getSeconds();
      this.madetime =
        time.getFullYear() +
        "-0" +
        (time.getMonth() + 1) +
        "-0" +
        time.getDate() +
        " " +
        arr[time.getDay()] +
        "  " +
        hour +
        (min < 10 ? ":0" : ":") +
        min +
        (sec < 10 ? ":0" : ":") +
        sec +
        (hour < 12 ? " AM" : " PM");
    },
    detail(id) {
      this.dialogVisible = true;
      this.FindById({ id }).then((res) => {
        this.article_detail = res.data;
      });
    },
  },
};
</script>